<template>
  <div class="myBanner">
    <!-- 
        carousel 轮播容器
            :interval="5000" 轮播间隔时间 5秒
            arrow=''  
            trigger	    指示器的触发方式	    string	clicktrigger	指示器的触发方式	string	click
            autoplay	是否自动切换	        boolean	—	true
            interval	自动切换的时间间隔，单位为毫秒	number	—	        3000
            indicator-position	指示器的位置	string	outside/none
            arrow	    切换箭头的显示时机	    string	always/hover/never	 hover
            loop	    是否循环显示	boolean	-	true
            direction	走马灯展示的方向	string	horizontal/vertical	horizontal
            height	    走马灯的高度	string	—	—height	走马灯的高度	string	—	—

        carousel-item 轮播容器内容 每一项
            label	该幻灯片所对应指示器的文本	string


    -->
    <el-carousel :interval="3000" arrow="always" @change="change">
      <el-carousel-item v-for="item in banner" :key="item.id">
        <img :src="item.imgUrl" alt />
      </el-carousel-item>
    </el-carousel>
    <!-- 右侧标号 -->
    <div class="num">
      <span>{{num}}</span>
      /{{banner.length}}
    </div>
    <!-- 右侧固定得文案 -->
    <div class="info">{{banner[num-1].desc}}</div>
  </div>
</template>

<script>
export default {
  props: ["banner"],
  data() {
    return {
      num: 1
    };
  },
  methods: {
    change(index) {
      console.log("change-----", index);
      this.num = index + 1;
    }
  }
};
</script>

<style scoped lang='less'>
/deep/.el-carousel__container {
  height: 400px;
  img {
    width: 100%;
    //1920px
    // transform: translateX(-50%);
  }
}
.myBanner {
  position: relative;
  .num {
    position: absolute;
    right: 20px;
    bottom: 50px;
    font-size: 20px;
    color: #fff;
    z-index: 2;
    span {
      font-size: 30px;
    }
  }
  .info {
    position: absolute;
    right: 20px;
    bottom: 20px;
    color: #fff;
    z-index: 2;
  }
}
</style>